import { Upload, Button, Divider, Dropdown, Form, Icon, Menu, message, Avatar, Table, PageHeader, Tooltip, Input } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { HEADER_OPTS } from '@/generic/ConfigParams';

const ButtonGroup = Button.Group;
const MARK = 'trash'

class HeaderOpts {

    constructor(props) {
        this.props = props;
        this.isMobile = props.props;
        this.dispatch = props.dispatch;
    }

    titleReander = () => {
        // console.log("===>>props ,", this.props)
        const elements = [];
        let index = 0;
        HEADER_OPTS[MARK].forEach(item => {
            if (!item.isGroup) {
                elements.push(
                    <Button 
                        key={index} 
                        className={styles[item.className]} 
                        icon={item.icon} 
                        type={item.type}
                        onClick={() =>{
                            console.log("==>> 1111",)
                            this.dispatch({
                                type: item.action,
                                payload: {}
                            })
                        }}
                    >
                        {!this.isMobile && item.text}
                    </Button>
                );
            }
            else {
                const _elems = [];
                item.groups.forEach((item, i) => {
                    _elems.push(
                        <Button 
                            key={i} 
                            icon={item.icon} 
                            type={item.type}
                        >
                            {!this.isMobile && item.text}
                        </Button>
                    );
                });
                elements.push(
                    <ButtonGroup key={index} className={styles[item.className]}>{_elems}</ButtonGroup>
                );
            }

            index++;
        });

        return <>{elements}</>
    }
}

const TrashOptions = props => {
    
    const { className, } = props;

    const header = new HeaderOpts(props);

    return (
        <>
            <PageHeader
                title={header.titleReander()}
                // extra={extraRender()}
                className={className}
            />
        </>
    )
}

export default TrashOptions;